<template>
  <div>
    <div>
      <!--<keep-alive include>-->
        <title-go-back :title="titleTop"></title-go-back>
      <!--</keep-alive>-->
    </div>
    <div class="city_dingwei">
      <div class="city_dingwei_top">
        <div><span class="iconfont icon-ditu"></span><span>{{cityDataInformation.region_name_c}}</span></div>
        <div  v-if="cityDataInformation.region_name_c">定位成功</div>
        <div v-else>定位中...</div>
      </div>
      <div class="city_dingwei_btn">当前正为您推荐{{cityDataInformation.region_name_c}}的内容，您可以切换城市站查看其它城市的内容</div>
      <div v-show="cityMapShow">
        <baidu-map class="bm-view" ak="lxCGtxzYDf1rK69UBspuzmxYkuYH725Q"
                   :center="center" :zoom="zoom"
                   @ready="handler">
        </baidu-map>
      </div>

    </div>
    <div>
      <mt-index-list>
        <mt-index-section v-for="(letter,key) in allCity" :key="key" :index="key">
          <mt-cell @click.native="choiceCityGo(cityName)" v-for="cityName in letter" :key="cityName.id"
                   :title="cityName.region_name_c">
          </mt-cell>
        </mt-index-section>
      </mt-index-list>
    </div>

  </div>
</template>

<script>
  import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
  import Vue from 'vue';
  import {IndexList, IndexSection, Cell} from 'mint-ui';
  import {CityList, getCityMap} from '../../axios/api';
  // import {makePy} from '../../assets/js/pinyin';
  import {setCityName, getLatitude, getLongitude} from '../../assets/js/cache';

  Vue.component(IndexList.name, IndexList);
  Vue.component(IndexSection.name, IndexSection);
  Vue.component(Cell.name, Cell);
  import TitleGoBack from '../../components/common/TitleGoBack'

  export default {
    name: 'CityIndex',
    data() {
      return {
        cityMapShow:false,
        titleTop: '城市选择',
        allCity: {},
        title: '地图找房',
        center: {lng: 0, lat: 0},
        zoom: 3,
        BMap: null,
        map: null,
        // latitude: '19.946464',
        // longitude: '110.119416',
        latitude: 0,
        longitude: 0,
        buildName: '当前位置',
        cityDataInformation: {}
      }
    },
    beforeRouteLeave(to, from, next) {
      this.$store.commit('setRouterName',this.$route.name);
      // 设置下一个路由的 meta
      to.meta.keepAlive = false; // C 跳转到 A 时让 A 不缓存，即刷新
      next();
    },
    created() {
      this.getCityList();
      this.latitude = getLatitude();
      this.longitude = getLongitude();
      // console.log(getLatitude(),getLongitude())
    },
    // beforeRouteLeave(to,from,next){
    //   to.meta.keepAlive = false;
    //   next();
    // },
    methods: {
      //再次定位
      // dingWeiAgin(){
      //   console.log('6666');
      //   let markergg = new BMap.Marker(new BMap.Point(this.center.lng, this.center.lat));
      //   markergg.setLabel(labelgg);
      // },
      handler({BMap, map}) {
        if (getLatitude() && getLongitude()) {
          this.latitude = getLatitude();
          this.longitude = getLongitude();
        } else {
          this.latitude = '19.946464';
          this.longitude = '110.119416';
          // this.latitude =  '20.0497739066';
          // this.longitude =  '110.2048317258';
        }

        // window.alert(getLatitude());
        // window.alert(getLatitude());
        this.center.lng = this.longitude; //经度   x
        this.center.lat = this.latitude;  //纬度   y
        let markergg = new BMap.Marker(new BMap.Point(this.center.lng, this.center.lat));
        map.addOverlay(markergg); //添加GPS marker
        let labelgg = new BMap.Label(this.buildName, {offset: new BMap.Size(20, -10)});
        markergg.setLabel(labelgg); //添加GPS label
        // console.log('======');
        this.zoom = 15; //搜索级别
        this.BMap = BMap;
        this.map = map;
        setTimeout(() => {
          // console.log(this.map);
          // console.log(this.map.Yg);
          getCityMap(this.map.Yg).then(res => {
            // console.log(res,'=====================');
            if (res.data === null) {
              this.cityDataInformation = {
                CODE: '4601',
                region_name_c: '海口市',
                region_name_e: 'H'
              };
              // console.log('没有值',this.cityDataInformation);
              setCityName(this.cityDataInformation);
            } else {
              // console.log('有值');
              this.cityDataInformation = res.data;
              setCityName(this.cityDataInformation);
            }
            // console.log(res);

          }).catch(err => {
            console.log(err);
          })
        }, 1500);

      },
      getCityList() {
        let that = this;
        CityList().then(res => {
          // console.log(res.data);
          that.allCity = res.data;
          // console.log(res.data.S)

        }).catch(err => {
          console.log(err)
        })
      },
      //选择城市
      choiceCityGo(value) {
        console.log('--------');
        console.log(value);
        this.cityDataInformation = value;
        setCityName(value);
        console.log('--------');
        this.$router.push({name: 'Index'})
      }

    },
    components: {
      TitleGoBack,
      BaiduMap
    }
  }
</script>

<style scoped>
  .city_dingwei {
    margin: 10px;
    background-color: #e6191e;
    border-radius: 10px;
    padding: 10px;
    color: #ffffff;
  }

  .city_dingwei .city_dingwei_top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .city_dingwei .city_dingwei_top > div:nth-child(1) {
    font-weight: bold;
  }

  .city_dingwei .city_dingwei_top > div:nth-child(2) {
    font-size: 0.9rem;
  }

  .city_dingwei .city_dingwei_top span {
    margin-right: 10px;
  }

  .city_dingwei .city_dingwei_btn {
    font-size: 0.9rem;
  }
</style>
